<template>
	<div class="role-manage">
		<div class="query-form">
			<el-form ref="form" :inline="true" :model="queryForm" :rules="rules">
				<el-form-item label="年月" prop="time">
					<el-date-picker @change="selectChangedTime" v-model="queryForm.time" type="month"
						placeholder="选择年月">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="身份证号" prop="idNumber">
					<el-input v-model="queryForm.idNumber" placeholder="请输身份证号" />
				</el-form-item>

				<el-form-item label="姓名" prop="name">
					<el-input v-model="queryForm.name" placeholder="请输入姓名" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
					<el-button @click="handleReset('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="base-table">
			<!--      <div class="action">
        <el-button type="primary" @click="handleAdd">创建</el-button>
      </div>-->
			<el-table :data="roleList">
				<el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
					  :width="item.width"
            :fixed="(item.prop === 'id'? true : false) || (item.prop === 'id_number'? true : false) || (item.prop === 'name'? true : false)"
            :min-width="(item.prop === 'id'? '220' : item.width) || (item.prop === 'id_number'? '150' : item.width)"
            :formatter="item.formatter">
				</el-table-column>

<!--				<el-table-column label="操作" width="300">
					<template #default="scope">
						<el-button size="mini" type="primary" @click="handleAdd(scope.row)">查看详情</el-button>
						<el-button size="mini" type="primary" @click="handleApply(scope.row)">工资变动申请/查看</el-button>
					</template>
				</el-table-column>-->
			</el-table>

			<el-pagination class="pagination" background layout="prev, pager, next" :total="pager.total"
				:page-size="pager.pageSize" @current-change="handleCurrentChange" />
		</div>

		<el-dialog title="工资变动申请/查看" v-model="showModalApply">
			<el-form label-width="100px">
				<el-form-item label="工资变动原因">
					<el-input type="textarea" v-model="apply.reason" placeholder="请输入工资变动原因"/>
				</el-form-item>
				<el-form-item label="审核结果">
					<el-input disabled="" v-model="apply.state" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose">取 消</el-button>
					<!-- <el-button v-if="applyOrckan == 1" type="primary" @click="handleSubmit">确 定</el-button> -->
					<el-button v-if="applyOrckan == 2" type="primary" @click="handleSubmit">申请</el-button>
					<el-button v-if="applyOrckan == 3" type="primary" @click="handleSubmit">再申请</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>
<script>
	import utils from "../utils/utils";
	export default {
		name: "role",
		data() {
			return {
				apply: {
					salary_id: "",
					reason: "",
					state:""
				},
				applyOrckan: 1, // 1,查看详情，2工资变动申请，3再申请,4待审核
				queryForm: {
					yearMonth: "",
					year: "",
					month: "",
					jobNumber: "",
					name: "",
          time: ""
				},
        columns: [],
				roleList: [],
				pager: {
					total: 0,
					pageNum: 1,
					pageSize: 10,
				},
				showModal: false,
				showModalApply: false,
				action: "create",
				salaryForm: {},
        // time: {},
        rules: {
          time: [
            {
              required: true,
              message: "请选择年月",
            },
          ],
        },
      }
		},
		mounted() {
			// this.getSalaryList();
			//this.getMenuList();
		},
		/*created() {
		  this.getMouthTypeList();
		},*/
		methods: {
			selectChangedTime(val) {
				// if (val == null) {
				// 	return;
				// }
				// this.queryForm.year = val.getFullYear();
				// this.queryForm.month = val.getMonth() + 1;

        const year = val.getFullYear();
        const month = val.getMonth() + 1;
        const time = year+'-0'+month;
        this.queryForm.time = time;
			},
      async search() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.getSalaryFiled();
            this.getSalaryList()
          }
        })
      },
			// 工资结构列表初始化
			async getSalaryList() {
				let param = {
					page: this.pager.pageNum,
					pageSize: this.pager.pageSize,
					// year: this.queryForm.year,
					// month: this.queryForm.month,
          idNumber: this.queryForm.idNumber,
					name: this.queryForm.name,
          time: this.queryForm.time
				}
				let list = await this.$api.getSalaryList(param);
				this.roleList = list.rows;
				this.pager.total = list.records;
			},
      // 查询列表字段
      async getSalaryFiled() {
        let param = {
          time: this.queryForm.time
        }
        let list = await this.$api.getSalaryFiled(param);

        this.columns = list.filter(item => {
          // if(!item.prop.includes('id')) {
          if(item.prop != 'id') {
            return item
          }
        })

        // this.columns = list;
      },
			// 菜单列表初始化
			/* async getMenuList() {
			   try {
			     let list = await this.$api.getMenuList();
			     this.menuList = list;
			     //this.getActionMap(list);
			   } catch (e) {
			     throw new Error(e);
			   }
			 },*/
			// 表单重置
			handleReset(form) {
				this.$refs[form].resetFields();
			},
			// 工资结构添加
			handleAdd(row) {
				this.applyOrckan = 1;
				this.action = "create";
				this.showModal = true;
			},
			// 工资变动申请
			// async handleApply(row) {
			// 	debugger
			// 	this.apply.salary_id = row.id;
			//
			// 	var list = await this.$api.salaryCAFindById(this.apply);
			// 	if(list != null){
			// 		this.apply.reason = list.reason;
			// 		if(list.state == 1){
			// 			this.apply.state = "待审核"
			// 			this.applyOrckan = 4;
			// 		}
			// 		if(list.state == 2){
			// 			this.apply.state = "审核通过"
			// 			this.applyOrckan = 3;
			// 		}
			// 		if(list.state == 3){
			// 			this.apply.state = "审核不通过"
			// 			this.applyOrckan = 3;
			// 		}
			//
			// 	}else{
			// 		this.applyOrckan = 2;
			// 	}
			// 	this.showModalApply = true;
			// },
			// 工资结构编辑
			handleEdit(row) {
				this.action = "edit";
				this.showModal = true;
				this.$nextTick(() => {
					this.salaryForm = {
						id: row.id,
						year: row.year,
						mouth: row.mouth,
					};
				});
			},
			// 工资结构删除
			async handleDel(id) {
				await this.$api.deleteMouthType(id);
				this.$message.success("删除成功");
				this.getSalaryList();
			},
			// 弹框关闭
			handleClose() {
				debugger
				if(this.applyOrckan == 1){
					// this.handleReset("dialogForm");
					this.showModal = false;
				}else{
					this.showModalApply = false;
					this.apply.salary_id = "";
					this.apply.reason = "";
					this.apply.state = "";
				}
			},
			// 工资结构提交
			async handleSubmit() {
				if(this.applyOrckan == 1){
					this.$refs.dialogForm.validate(async (valid) => {
						if (valid) {
							let {
								salaryForm,
								action
							} = this;
							let params = {
								...salaryForm,
								action
							};
					
							if (this.action == "create") {
								await this.$api.addMouthType(params);
								this.$message.success("创建成功");
							} else if (this.action == "edit") {
								await this.$api.updateMouthType(params);
								this.$message.success("修改成功");
							}
							this.showModal = false;
							this.handleReset("dialogForm");
							this.getSalaryList();
						}
					});
				}
				if(this.applyOrckan == 2 || this.applyOrckan == 3){
					if(this.apply.reason == "" || this.apply.reason == ""){
						this.$message.error("请填写申请原因");
						return;
					}
					await this.$api.salaryCAdd(this.apply);
					this.$message.success("申请成功，待审核");
				}
				
			},
			// 设置工资结构
			handleSalaryStructure(row) {
				this.$router.push({
					path: `/SalaryStructure`,
					query: {
						id: row.id,
						year: row.year,
						month: row.mouth
					},
				})
				// this.$router.push({
				//   path: `/sub-category/${row.id}/list`,
				//   query: { categoryName: row.name },
				// })
			},
			// 生成名单
			async handleGenerate(id) {
				await this.$api.generate(id);
				this.$message.success("生成名单成功");
			},
			handleCurrentChange(current) {
				this.pager.pageNum = current;
				this.getSalaryList();
			},
			/*handleOpenPermission(row) {
			  this.curRoleId = row._id;
			  this.curRoleName = row.roleName;
			  this.showPermission = true;
			  let { checkedKeys } = row.permissionList;
			  setTimeout(() => {
			    this.$refs.tree.setCheckedKeys(checkedKeys);
			  });
			},
			async handlePermissionSubmit() {
			  let nodes = this.$refs.tree.getCheckedNodes();
			  let halfKeys = this.$refs.tree.getHalfCheckedKeys();
			  let checkedKeys = [];
			  let parentKeys = [];
			  nodes.map((node) => {
			    if (!node.children) {
			      checkedKeys.push(node._id);
			    } else {
			      parentKeys.push(node._id);
			    }
			  });
			  let params = {
			    _id: this.curRoleId,
			    permissionList: {
			      checkedKeys,
			      halfCheckedKeys: parentKeys.concat(halfKeys),
			    },
			  };
			  await this.$api.updatePermission(params);
			  this.showPermission = false;
			  this.$message.success("设置成功");
			  this.getMouthTypeList();
			},
			getActionMap(list) {
			  let actionMap = {};
			  const deep = (arr) => {
			    while (arr.length) {
			      let item = arr.pop();
			      if (item.children && item.action) {
			        actionMap[item._id] = item.menuName;
			      }
			      if (item.children && !item.action) {
			        deep(item.children);
			      }
			    }
			  };
			  deep(JSON.parse(JSON.stringify(list)));
			  this.actionMap = actionMap;
			},*/
		},
	};
</script>

<style lang="scss">
	.el-textarea__inner{
	    height: 100px;
	    overflow-y: auto;
	    /* overflow-y: auto;兼容ie  */
	 }
</style>
